<template>
  <van-row>
    <van-row v-if="isData">
      <van-swipe-cell v-for="(item,index) in data" :key="item.id">
        <van-cell :key="index" size="large" :to="'/chatmsg/'+item.reciveUserId">
          <template #icon>
            <van-icon v-if="item.heardImgUrl" :name="item.heardImgUrl" size="30" />
            <van-icon v-else name="user-o" size="30"></van-icon>
          </template>
          <template #title>
            <label>{{item.name}}</label>
          </template>
          <!-- 描述信息 -->
          <template #label>
            <label v-if="item.contentType==2">[图片]</label>
            <label v-else>{{item.chatContent | ellipsis}}</label>
          </template>
          <!-- 右侧显示消息的时间 -->
          <template>
            <label>{{$moment(item.updateTime).format("YYYY-MM-DD HH:MM")}}</label>
          </template>
        </van-cell>
        <!-- 往左滑动显示的内容 -->
        <template #right>
          <van-button square text="删除" type="danger" @click="onHandlerDel(item.id)" class="btn_swipeDel" />
        </template>
      </van-swipe-cell>
    </van-row>
    <van-row v-else>
      <van-empty description="无数据" />
    </van-row>
  </van-row>
</template>
<script>
  import {
    Button,
    Toast,
    Row,
    Col,
    Icon,
    Cell,
    SwipeCell,
    Empty
  } from 'vant';
  export default {
    name: 'chatsessionstate',
    components: {
      'van-button': Button,
      'van-row': Row,
      'van-col': Col,
      'van-icon': Icon,
      'van-cell': Cell,
      'van-swipe-cell': SwipeCell,
      'van-empty': Empty
    },
    data() {
      return {
        data: [], //会话数据
      }
    },
    filters: {
      ellipsis(value) {
        if (!value) return ''
        if (value.length > 15) {
          return value.slice(0, 15) + '...'
        }
        return value
      }
    },
    computed: {
      isData: function () {
        if (this.data && this.data.length > 0)
          return true;
        else
          return false
      }
    },
    methods: {
      async loadData() {
        Toast.loading({
          message: '加载中...',
          forbidClick: true,
          loadingType: 'spinner',
          duration: 0
        });
        var res = await this.$ajax.get(`/api/ChatSessionState/${ this.$user.getUserId()}`);
           //清除提示框
        Toast.clear();
        if (res.status == 1) {
          Toast.fail(res.msg);
          return;
        }
        this.data = res.data;
      },
      //删除会话状态
      async onHandlerDel(id) {
        Toast.loading({
          message: '正在操作...',
          forbidClick: false,
          loadingType: 'spinner',
          duration: 0
        });
        var res = await this.$ajax.delete(`/api/ChatSessionState/${id}`);
        //清除提示框
        Toast.clear();
        if (res.status == 1) {
          Toast.fail(res.msg);
          return;
        }
        //移除数组指定的元素
        var index = this.data.findIndex(a => a.id == id)
        this.data.splice(index, 1)
      }
    },
    async mounted() {
      await this.loadData();
    }
  }

</script>

<style scoped>
  .van-cell--large .van-cell__title {
    margin-left: 15px;
  }

  .btn_swipeDel {
    height: 100%;
  }

</style>
